<template>
	<view>
		<u-sticky>
			<view class="date-box" @click="isShowDate=true">
				<text>{{param.dataTimeRange}}</text>
				<uni-icons class="ml-10" custom-prefix="custom-icon" type="custom-icon-xiajiantou" size="20" />
			</view>
		</u-sticky>
		<view class="card">
			<view class="bg" />
			<view class="item">
				<view class="flex flex-column">
					<text class="fsize-28">营业收入(元)</text>
					<text class="fsize-60">{{pageData.sumAllAmount}}</text>
					<view class="fsize-20">
						<text>较上周营业收入</text>
						<text class="ml-10">{{pageData.compareSumAllAmount}}</text>
					</view>
				</view>
				<view class="flex justify-between mt-40">
					<view class="flex flex-column">
						<text class="fsize-24">营业额(元)</text>
						<text class="fsize-40">{{pageData.sumAmount}}</text>
						<view class="fsize-20">
							<text>较上周营业额</text>
							<text class="ml-10">{{pageData.compareSumAmount}}</text>
						</view>
					</view>
					<view class="flex flex-column">
						<text class="fsize-24">优惠金额(元)</text>
						<text class="fsize-40">{{pageData.discountAmount}}</text>
						<view class="fsize-20">
							<text>较上周优惠金额</text>
							<text class="ml-10">{{pageData.compareDiscount}}</text>
						</view>
					</view>
					<view class="flex flex-column">
						<text class="fsize-24">订单量(单)</text>
						<text class="fsize-40">{{pageData.orderCount}}</text>
						<view class="fsize-20">
							<text>较上周订单数</text>
							<text class="ml-10">{{pageData.compareOrderCount}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="item mt-20">
				<view class="fsize-30 fweigh-600 mb-20">营业趋势</view>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :canvas2d="true" canvasId="HykWBDvCNEguxNZRvaiHtMsLwzBOPqsS" />
				</view>
			</view>
			<view class="item mt-20">
				<view class="fsize-30 fweigh-600 mb-20">消费指标</view>
				<view class="data-list">
					<view class="item" v-for="(im, ix) in pageData.consumeIndex" :key="ix">
						<text>{{im.title}}</text>
						<text>{{im.value}}</text>
						<view class="fsize-20">
							<text class="ml-10">{{im.compareValue}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="item mt-20">
				<view class="fsize-30 fweigh-600 mb-20">餐段分布</view>
				<zb-table :fit="true" :columns="columns" :stripe="false" :data="pageData.marketList" />
			</view>
		</view>
		<u-calendar :show="isShowDate" mode="single" @confirm="confirm" :allowSameDay="true" :monthNum="15" @close="isShowDate=false" />
	</view>
</template>

<script>
	import date from "@/utils/date"
	export default {
		data() {
			return {
				isShowDate: false,
				pageData: {},
				chartData: {},
				param: {
					dataTimeRange: date.getToday(),
				},
				columns: [{
						name: "name",
						label: "餐段",
						fixed: true
					},
					{
						name: "orderCount",
						label: "订单量",
						fixed: false,
						align: "center"
					},
					{
						name: "total",
						label: "营业额",
						fixed: false,
						align: "center"
					},
					{
						name: "sumAmount",
						label: "营业收入",
						fixed: false,
						align: "center"
					},
				],
				opts: {
					padding: [15, 6, 0, 6],
					enableScroll: false,
					legend: {show: false},
					xAxis: {
						disableGrid: true,
						fontSize: 12,
						rotateLabel: true,
						marginTop: 10
					},
					yAxis: {
						data: [
							{
								min: 0
							}
						]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							seriesGap: 5,
							barBorderRadius: [ 6, 6, 6, 6 ]
						},
						markLine: {
							data: [
								{
									value: 21,
									showLabel: true
								}
							]
						}
					}
				}
			};
		},
		onLoad() {
			this.getPageData()
		},
		methods: {
			confirm(e) {
				console.log(e)
				this.param.dataTimeRange = e[0]
				this.getPageData()
				this.isShowDate = false
			},
			getPageData() {
				this.$api.GetBusinessOverview(this.param).then(res => {
					this.pageData = res.data
					let ecData = {
						categories: res.data.trendChar.map(im=>im.day.slice(5, 17)),
						series: [
							// {
							// 	name:"",
							// 	type: "area",
							// 	style: "curve",
							// 	data: res.data.trendChar.map(im=>im.amount)
							// },
						{
							name:"",
							type: "column",
							data:  res.data.trendChar.map(im=>im.amount)
						}]
					}
					this.chartData = JSON.parse(JSON.stringify(ecData))
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.date-box {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: $my-main-color;
		padding: 20rpx;
		font-size: 14px;
	}

	.card {
		padding: 0 20rpx;
		position: relative;
		.bg{
			width: 100%;
			height: 120rpx;
			border-radius: 0 0 3% 3%;
			background-color: $my-main-color;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
		.item {
			padding: 30rpx;
			border-radius: 10rpx;
			background: #fff;
		}
	}
	.data-list{
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.item{
			width: 320rpx;
			border-radius: 10rpx;
			background-color: #F8F8F8;
			margin-bottom: 10rpx;
			padding: 20rpx;
			display: flex;
			flex-direction: column;
		}
	}
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>